﻿<!DOCTYPE html>
<html lang="en">
<?php
// 启动会话
session_start();
?>

<script>
   function userIsLoggedIn() {
        // 在这里实现用户登录状态的检查逻辑
        // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
        // 示例：检查用户是否具有有效的登录凭据
        // 这里改为检查会话中的登录状态
        return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
    }

    // 在页面加载时检查用户登录状态
    window.addEventListener('DOMContentLoaded', function() {
        if (!userIsLoggedIn()) {
            window.location.href = 'Login.php'; // 请将 'login.html' 替换为您实际的登录页面路径
        }
    });
</script>

<head>
   <meta charset="utf-8">
   <meta content="IE=edge" http-equiv="X-UA-Compatible">
   <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

   <!-- ========== SEO ========== -->
   <title>Rooms List View</title>
   <meta content="" name="description">
   <meta content="" name="keywords">
   <meta content="" name="author">

   <!-- ========== FAVICON ========== -->
   <link rel="apple-touch-icon-precomposed" href="images/favicon-apple.png" />
   <link rel="icon" href="images/favicon.png">

   <!-- ========== STYLESHEETS ========== -->
   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="revolution/css/layers.css" rel="stylesheet" type="text/css" />
   <link href="revolution/css/settings.css" rel="stylesheet" type="text/css" />
   <link href="revolution/css/navigation.css" rel="stylesheet" type="text/css" />
   <link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
   <link href="css/animate.min.css" rel="stylesheet" type="text/css">
   <link href="css/famfamfam-flags.css" rel="stylesheet" type="text/css">
   <link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
   <link href="css/owl.carousel.min.css" rel="stylesheet" type="text/css">
   <link href="css/style.css" rel="stylesheet" type="text/css">
   <link href="css/responsive.css" rel="stylesheet" type="text/css">

   <!-- ========== ICON FONTS ========== -->
   <link href="fonts/font-awesome.min.css" rel="stylesheet">
   <link href="fonts/flaticon.css" rel="stylesheet">

   <!-- ========== GOOGLE FONTS ========== -->
   <link href="./css/fonts.googleapis.comcss.css" rel="stylesheet">

   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
   <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

   <div id="smoothpage" class="wrapper">

      <!-- ========== TOP MENU ========== -->
      <div class="top_menu">
         <div class="container">
            <div class="welcome_mssg hidden-xs">
               欢迎光临青云庭院酒店
            </div>
            <ul class="top_menu_right">
               <li><i class="fa fa-phone"></i><a href="tel:18475555555"> 1-888-123-4567 </a></li>
               <li class="email hidden-xxs"><i class="fa fa-envelope-o "></i> <a href="mailto:contact@site.com">contact@site.com</a></li>
               <li class="language-switcher">
                  <nav class="dropdown">
                     <a href="#" class="dropdown-toggle select" data-hover="dropdown" data-toggle="dropdown">
                        <i class="famfamfam-flag-cn "></i>中国<b class="caret"></b>
                     </a>
                     <ul class="dropdown-menu">
                        <li><a href="#"><i class="famfamfam-flag-us "></i>美国</a></li>
                        <li><a href="#"><i class="famfamfam-flag-de "></i>德国</a></li>
                        <li><a href="#"><i class="famfamfam-flag-jp "></i>日本</a></li>
                        <li><a href="#"><i class="famfamfam-flag-ru "></i>俄罗斯</a></li>
                        <li><a href="#"><i class="famfamfam-flag-fr "></i>法国</a></li>
                        <li><a href="#"><i class="famfamfam-flag-no "></i>挪威</a></li>
                        <li><a href="#"><i class="famfamfam-flag-sg"></i>新加坡</a></li>
                        <li><a href="#"><i class="famfamfam-flag-cn"></i>中国</a></li>
                     </ul>
                  </nav>
               </li>
               <?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) : ?>
                  <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-hover="dropdown"><i class="fa fa-user"></i> 欢迎，<?php echo $_SESSION['username']; ?></a>
                  </li>
                  <li><a href="logout.php"><i class="fa fa-sign-out"></i>退出</a></li>
               <?php else : ?>
                  <li><a href="login.php">登录</a></li>
                  <li><a href="login.php">注册</a></li>
               <?php endif; ?>
               <?php if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true && $_SESSION['role'] !== "顾客") : ?>
                  <li><a href="backend01.php">酒店后台</a></li>
               <?php endif; ?>
            </ul>
         </div>
      </div>

      <!-- ========== HEADER ========== -->
      <header class="fixed">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle mobile_menu_btn" data-toggle="collapse" data-target=".mobile_menu" aria-expanded="false">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="index.php">
                  <img src="images/logo.svg" height="32" alt="Logo">
               </a>
            </div>
            <nav id="main_menu" class="mobile_menu navbar-collapse">
               <ul class="nav navbar-nav">
                  <li><a href="index.php" class="navbar-link">首页</a></li>
                  <li><a href="about-us.php" class="navbar-link">关于我们</a></li>
                  <li><a href="room.php" class="navbar-link">客房</a></li>
                  <li><a href="rooms-list.php" class="navbar-link">客房列表</a></li>
                  <li><a href="contact.php" class="navbar-link">联系我们</a></li>
                  <li><a href="blog.php" class="navbar-link">博客</a></li>
               </ul>
            </nav>
         </div>
      </header>

      <!-- =========== PAGE TITLE ========== -->
      <div class="page_title gradient_overlay" style="background: url(images/page_title_bg.jpg);">
         <div class="container">
            <div class="inner">
               <h1>房间列表</h1>
               <ol class="breadcrumb">
                  <li><a href="index.php">主页</a></li>
                  <li>房间列表</li>
               </ol>
            </div>
         </div>
      </div>

      <!-- =========== MAIN ========== -->
      <main id="rooms_list">
         <div class="container">
            <!-- ITEM -->
            <article class="room_list">
               <div class="row">
                  <div class="col-lg-4 col-md-5 col-sm-12">
                     <figure>
                        <div class="room_list_slider owl-carousel">
                           <div class="item">
                              <a href="room.php" class="hover_effect h_link h_blue"><img src="images/rooms/double1.jpg" alt="Image"></a>
                           </div>
                           <div class="item">
                              <a href="room.php" class="hover_effect h_link h_blue"><img src="images/rooms/double2.jpg" alt="Image"></a>
                           </div>
                           <div class="item">
                              <a href="room.php" class="hover_effect h_link h_blue"><img src="images/rooms/double3.jpg" alt="Image"></a>
                           </div>
                        </div>
                     </figure>
                  </div>
                  <div class="col-lg-8 col-md-7 col-sm-12">
                     <div class="room_details">
                        <div class="col-md-9 col-sm-9 col-xs-12 room_desc">
                           <h3><a href="room.php">双人间 - 带滑动门 </a></h3>
                           <p>我们的双人间是专为情侣或朋友来旅行的客人设计的理想选择。每间双人间都充满了温馨和浪漫的氛围，为您打造一个舒适而隐私的居住空间。为您提供一夜良好的休息。</p>
                           <div class="room_services">
                              <i class="fa fa-coffee" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Breakfast Included" data-original-title="Breakfast"></i>
                              <i class="fa fa-cutlery" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Restaurant" data-original-title="Zante Restaurant"></i>
                              <i class="fa fa-television" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Plasma TV with cable Channel" data-original-title="Plasma TV"></i>
                           </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-12 room_price">
                           <div class="room_price_inner">
                              <span class="room_price_number"> 129,00￥ </span>
                              <small class="upper"> / 晚 </small>
                              <a href="room.php" class="button  btn_blue btn_full upper">立刻预订</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </article>

            <!-- php分页 -->
            <?php
            require_once 'backend/api/databaseConnection.php';
            // 获取当前页码
            if (isset($_GET['page']) && is_numeric($_GET['page'])) {
               $currentPage = $_GET['page'];
            } else {
               $currentPage = 1;
            }
            // 定义每页显示的记录数量
            $recordsPerPage = 3;
            try {
               $conn = connectToDatabase();
               $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
               // 查询总记录数量
               $totalRecords = $conn->query("SELECT COUNT(*) FROM rooms")->fetchColumn();
               // 计算总页数
               $totalPages = ceil($totalRecords / $recordsPerPage);
               // 计算当前页的记录起始位置
               $offset = ($currentPage - 1) * $recordsPerPage;
               $query = "SELECT * FROM rooms LIMIT $offset, $recordsPerPage";
               $stmt = $conn->query($query);
               if ($stmt->rowCount() > 0) {
                  // 循环遍历每行数据
                  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                     // 获取每行数据的字段值
                     $roomType = $row['roomType'];
                     $roomNumber = $row['roomNumber'];
                     $roomDescription = $row['roomDescription'];
                     $price = $row['price'];
                     $fileInput = $row['fileInput'];
                     // 使用获取的字段值替换代码模板中相应的部分
                     echo '<article class="room_list">
                                 <div class="row row-flex">
                                    <div class="col-lg-4 col-md-5 col-sm-12">
                                       <figure>
                                          <a href="room.php" class="hover_effect h_link h_blue">
                                             <img src="' . $fileInput . '" class="img-responsive" alt="Image">
                                          </a>
                                       </figure>
                                    </div>
                                    <div class="col-lg-8 col-md-7 col-sm-12">
                                       <div class="room_details row-flex">
                                          <div class="col-md-9 col-sm-9 col-xs-12 room_desc">
                                             <h3><a href="room.php">' . $roomType . $roomNumber . '</a></h3>
                                             <p>' . $roomDescription . '</p>
                                             <div class="room_services">
                                                <i class="fa fa-coffee" data-toggle="popover" data-placement="top" data-trigger="hover"
                                                   data-content="Breakfast Included" data-original-title="Breakfast"></i>
                                                <i class="fa fa-cutlery" data-toggle="popover" data-placement="top" data-trigger="hover"
                                                   data-content="Restaurant" data-original-title="Zante Restaurant"></i>
                                             </div>
                                          </div>
                                          <div class="col-md-3 col-sm-3 col-xs-12 room_price">
                                             <div class="room_price_inner">
                                                <span class="room_price_number">' . $price . ' ￥</span>
                                                <small class="upper"> / 晚 </small>
                                                <a href="room.php" class="button  btn_blue btn_full upper">立刻预订</a>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </article>';
                  }
                  // 输出分页导航
                  echo '<nav class="a_center"> <ul class="pagination mt50 mb0">';
                  if ($currentPage > 1) {
                     echo '<li class="prev_pagination"><a href="?page=' . ($currentPage - 1) . '" onclick="navigateToPage(event, ' . ($currentPage - 1) . ')"><i class="fa fa-angle-left"></i></a></li>';
                  }
                  for ($i = 1; $i <= $totalPages; $i++) {
                     echo '<li ' . ($currentPage == $i ? 'class="active"' : '') . '><a href="?page=' . $i . '" onclick="navigateToPage(event, ' . $i . ')">' . $i . '</a></li>';
                  }
                  if ($currentPage < $totalPages) {
                     echo '<li class="next_pagination"><a href="?page=' . ($currentPage + 1) . '" onclick="navigateToPage(event, ' . ($currentPage + 1) . ')"><i class="fa fa-angle-right"></i></a></li>';
                  }
                  echo '</ul></nav>';
               } else {
                  echo 'No data found in the database.';
               }
            } catch (PDOException $e) {
               echo 'Database Error: ' . $e->getMessage();
            }
            ?>

            <script>
               function navigateToPage(event, page) {
                  event.preventDefault(); // 阻止默认行为的触发，防止直接跳转到新页面
                  window.location.href = '?page=' + page; // 导航到新页面
                  setTimeout(function() {
                     location.reload(); // 延迟刷新页面
                  }, 500); // 设置一个适当的延迟时间
               }
            </script>


         </div>
      </main>

      <!-- ========== FOOTER ========== -->
      <footer>
         <div class="inner">
            <div class="container">
               <div class="row">
                  <div class="col-md-3 col-sm-6 widget">
                     <div class="about">
                        <a href="index.php"><img class="logo" src="images/logo.svg" height="32" alt="Logo"></a>
                        <p>“绿树掩映，清风拂面，尽享雅致之旅。欢迎莅临我们的酒店，体验至臻奢华与无与伦比的服务。让我们将您的每一个细节需求化为巧夺天工的菁华。</p>
                        <p>为您营造一个温馨、舒适的家外之家。无论是商务旅行还是休闲度假，我们的酒店始终以您的满意为首要目标。</p>
                     </div>
                  </div>
                  <div class="col-md-3 col-sm-6 widget">
                     <h5>最新消息</h5>
                     <ul class="blog_posts">
                        <li><a href="blog-post.php">在希腊活出你的神话</a> <small>AUGUST 13, 2017</small>
                        </li>
                        <li><a href="blog-post.php">青云庭院图片</a> <small>AUGUST 16, 2017</small>
                        </li>
                        <li><a href="blog-post.php">青云庭院家庭聚会</a> <small>SEPTEMBER 15,
                              2017</small></li>
                     </ul>
                  </div>
                  <div class="col-md-3 col-sm-6 widget">
                     <h5>相关链接</h5>
                     <ul class="useful_links">
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">历史</a></li>
                        <li><a href="#">图库</a></li>
                        <li><a href="#">位置</a></li>
                     </ul>
                  </div>
                  <div class="col-md-3 col-sm-6 widget">
                     <h5>联系我们</h5>
                     <address>
                        <ul class="address_details">
                           <li><i class="glyphicon glyphicon-map-marker"></i> 25, Navagio Zakynthos， 希腊
                           </li>
                           <li><i class="glyphicon glyphicon-phone-alt"></i> Phone: +86-153-033-038 </li>
                           <li><i class="fa fa-fax"></i> Fax: 800 123 3456</li>
                           <li><i class="fa fa-envelope"></i> Email: <a href="mailto:info@site.com">contact@site.com</a>
                           </li>
                        </ul>
                     </address>
                  </div>
               </div>
            </div>
         </div>
         <div class="subfooter">
            <div class="container">
               <div class="row">
                  <div class="col-md-6 col-sm-6">
                     <div class="copyrights">
                        Copyright &copy; 2023.Company name All rights reserved
                     </div>
                  </div>
                  <div class="col-md-6 col-sm-6">
                     <div class="social_media">
                        <a class="facebook" data-original-title="Facebook" data-toggle="tooltip" href="#"><i class="fa fa-facebook"></i></a>
                        <a class="twitter" data-original-title="Twitter" data-toggle="tooltip" href="#"><i class="fa fa-twitter"></i></a>
                        <a class="googleplus" data-original-title="Google Plus" data-toggle="tooltip" href="#"><i class="fa fa-google-plus"></i></a>
                        <a class="pinterest" data-original-title="Pinterest" data-toggle="tooltip" href="#"><i class="fa fa-pinterest"></i></a>
                        <a class="linkedin" data-original-title="Linkedin" data-toggle="tooltip" href="#"><i class="fa fa-linkedin"></i></a>
                        <a class="instagram" data-original-title="Instagram" data-toggle="tooltip" href="#"><i class="fa fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </footer>

   </div>

   <!-- ========== BACK TO TOP ========== -->
   <div id="back_to_top">
      <i class="fa fa-angle-up" aria-hidden="true"></i>
   </div>

   <!-- ========== JAVASCRIPT ========== -->
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <!---<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyBDgMJEPio2qomUKV1iqlIufj4u2NVd3q4"></script>--->
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   <script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>
   <script type="text/javascript" src="js/bootstrap-select.min.js"></script>
   <script type="text/javascript" src="js/jquery.smoothState.js"></script>
   <script type="text/javascript" src="js/moment.min.js"></script>
   <script type="text/javascript" src="js/morphext.min.js"></script>
   <script type="text/javascript" src="js/wow.min.js"></script>
   <script type="text/javascript" src="js/jquery.easing.min.js"></script>
   <script type="text/javascript" src="js/owl.carousel.min.js"></script>
   <script type="text/javascript" src="js/owl.carousel.thumbs.min.js"></script>
   <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
   <script type="text/javascript" src="js/jPushMenu.js"></script>
   <script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
   <script type="text/javascript" src="js/countUp.min.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.min.js"></script>
   <script type="text/javascript" src="js/main.js"></script>

</body>

</html>